<template>
	<view class="matching">
		<view class="top"></view>
		<view class="head">
			<image src="../../static/camera.png"></image>
			<view>为你匹配的人</view>
			<view></view>
		</view>	
		<view class="content">
			<view class="list">
				<view class="one"><image src="../../static/img1.png"></image></view>
				<view class="two">
					<view class="name">刘苗苗</view>
					<view class="aihao">22岁，看电影、看书、旅游…</view>
				</view>
				<view class="three">
					<view class="imgThree"><image src="../../static/zan.png"></image></view>
					<view class="num_three">1239</view>
				</view>
				<view class="four">
					<view class="four_img"><image src="../../static/xin.png"></image></view>
					<view class="four_num">239</view>
				</view>
			</view>	
			<view class="list">
				<view class="one"><image src="../../static/img2.png"></image></view>
				<view class="two">
					<view class="name">冯朵朵</view>
					<view class="aihao">20岁，瑜伽、爬山、绘画…</view>
				</view>
				<view class="three">
					<view class="imgThree"><image src="../../static/zan.png"></image></view>
					<view class="num_three">10万</view>
				</view>
				<view class="four">
					<view class="four_img"><image src="../../static/xin.png"></image></view>
					<view class="four_num">1.5万</view>
				</view>
			</view>	
			<view class="list">
				<view class="one"><image src="../../static/img3.png"></image></view>
				<view class="two">
					<view class="name">程璐</view>
					<view class="aihao">24岁，跑步、羽毛球、徒步…</view>
				</view>
				<view class="three">
					<view class="imgThree"><image src="../../static/zan.png"></image></view>
					<view class="num_three">8.1万</view>
				</view>
				<view class="four">
					<view class="four_img"><image src="../../static/xin.png"></image></view>
					<view class="four_num">20万</view>
				</view>
			</view>	
			<view class="list">
				<view class="one"><image src="../../static/img4.png"></image></view>
				<view class="two">
					<view class="name">刘菲菲</view>
					<view class="aihao">20岁，看电影、滑雪、游泳…</view>
				</view>
				<view class="three">
					<view class="imgThree"><image src="../../static/zan.png"></image></view>
					<view class="num_three">1239</view>
				</view>
				<view class="four">
					<view class="four_img"><image src="../../static/xin.png"></image></view>
					<view class="four_num">229</view>
				</view>
			</view>	
			<view class="list">
				<view class="one"><image src="../../static/img5.png"></image></view>
				<view class="two">
					<view class="name">刘苗苗</view>
					<view class="aihao">22岁，看电影、看书、旅游…</view>
				</view>
				<view class="three">
					<view class="imgThree"><image src="../../static/zan.png"></image></view>
					<view class="num_three">1239</view>
				</view>
				<view class="four">
					<view class="four_img"><image src="../../static/xin.png"></image></view>
					<view class="four_num">239</view>
				</view>
			</view>	
			<view class="list">
				<view class="one"><image src="../../static/img6.png"></image></view>
				<view class="two">
					<view class="name">黄幻</view>
					<view class="aihao">23岁，户外探险、绘画、音乐…</view>
				</view>
				<view class="three">
					<view class="imgThree"><image src="../../static/zan.png"></image></view>
					<view class="num_three">1239</view>
				</view>
				<view class="four">
					<view class="four_img"><image src="../../static/xin.png"></image></view>
					<view class="four_num">239</view>
				</view>
			</view>	
			<view class="list">
				<view class="one"><image src="../../static/img7.png"></image></view>
				<view class="two">
					<view class="name">朱慧</view>
					<view class="aihao">20岁，旅游、游泳、网球…</view>
				</view>
				<view class="three">
					<view class="imgThree"><image src="../../static/zan.png"></image></view>
					<view class="num_three">1239</view>
				</view>
				<view class="four">
					<view class="four_img"><image src="../../static/xin.png"></image></view>
					<view class="four_num">239</view>
				</view>
			</view>	
			<view class="list">
				<view class="one"><image src="../../static/img8.png"></image></view>
				<view class="two">
					<view class="name">司丝</view>
					<view class="aihao">23岁，舞蹈、看书、音乐…</view>
				</view>
				<view class="three">
					<view class="imgThree"><image src="../../static/zan.png"></image></view>
					<view class="num_three">1239</view>
				</view>
				<view class="four">
					<view class="four_img"><image src="../../static/xin.png"></image></view>
					<view class="four_num">239</view>
				</view>
			</view>	
			<view class="list">
				<view class="one"><image src="../../static/img9.png"></image></view>
				<view class="two">
					<view class="name">何安</view>
					<view class="aihao">22岁，看电影、看书、旅游…</view>
				</view>
				<view class="three">
					<view class="imgThree"><image src="../../static/zan.png"></image></view>
					<view class="num_three">1239</view>
				</view>
				<view class="four">
					<view class="four_img"><image src="../../static/xin.png"></image></view>
					<view class="four_num">239</view>
				</view>
			</view>	
			<view class="list">
				<view class="one"><image src="../../static/img10.png"></image></view>
				<view class="two">
					<view class="name">安月惠</view>
					<view class="aihao">22岁，看电影、看书、旅游…</view>
				</view>
				<view class="three">
					<view class="imgThree"><image src="../../static/zan.png"></image></view>
					<view class="num_three">1239</view>
				</view>
				<view class="four">
					<view class="four_img"><image src="../../static/xin.png"></image></view>
					<view class="four_num">239</view>
				</view>
			</view>	
			<view class="list">
				<view class="one"><image src="../../static/img1.png"></image></view>
				<view class="two">
					<view class="name">李树</view>
					<view class="aihao">20岁，睡懒觉、散步、动漫…</view>
				</view>
				<view class="three">
					<view class="imgThree"><image src="../../static/zan.png"></image></view>
					<view class="num_three">1239</view>
				</view>
				<view class="four">
					<view class="four_img"><image src="../../static/xin.png"></image></view>
					<view class="four_num">239</view>
				</view>
			</view>	
			<view class="list">
				<view class="one"><image src="../../static/img11.png"></image></view>
				<view class="two">
					<view class="name">王新月</view>
					<view class="aihao">21岁，咖啡、火锅、旅游…</view>
				</view>
				<view class="three">
					<view class="imgThree"><image src="../../static/zan.png"></image></view>
					<view class="num_three">1239</view>
				</view>
				<view class="four">
					<view class="four_img"><image src="../../static/xin.png"></image></view>
					<view class="four_num">239</view>
				</view>
			</view>	
			<view class="list">
				<view class="one"><image src="../../static/img12.png"></image></view>
				<view class="two">
					<view class="name">邓欢欢</view>
					<view class="aihao">24岁，绘画、写作、阅读…</view>
				</view>
				<view class="three">
					<view class="imgThree"><image src="../../static/zan.png"></image></view>
					<view class="num_three">1239</view>
				</view>
				<view class="four">
					<view class="four_img"><image src="../../static/xin.png"></image></view>
					<view class="four_num">2359</view>
				</view>
			</view>	
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped lang="less">
	page{
		width: 100%;
		height: 100%;
		position: relative;
		.top{
			position: absolute;
			top:0;
			left: 0;
			width: 100%;
			height: 40rpx;
		}
		.head{
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 88rpx;
			line-height: 88rpx;
			width: 100%;
			position: absolute;
			top:40rpx;
			left: 0;
			right: 0;
			padding:0 20rpx 0 35rpx;
			box-sizing: border-box;
			image{
				width: 48rpx;
				height: 39rpx;
			}
			
		}
		.content{
			position: absolute;
			top:128rpx;
			left: 0;
			right: 0;
			bottom: 0;
			padding: 0 40rpx 0 30rpx;
			overflow-y: scroll;
			box-sizing: border-box;
		  .list{
			  display:flex;
			  justify-content: space-between;
			  align-items: center;
			  height: 185rpx;
			  border-bottom: 1px solid #F2F2F2;
			 .one{
				 width: 120rpx;
				 height: 120rpx;
				 border-radius: 50%;
				 overflow: hidden;
				 margin-right: 15rpx;
				image{
					width: 100%;
					height: 100%;
				} 
			 } 
			 .two{
				 width: 425rpx;
				 display: flex;
				 flex-direction: column;
				 margin-bottom: 15rpx;
				 .name{
					 font-size: 32rpx;
					 color:#333;
					 font-family: PingFang-SC-Medium;
					 font-weight: Medium;
					 margin-bottom:15rpx;
				 }
				 .aihao{
					 font-family: PingFang-SC-Medium;
					 font-weight: Medium;
					 font-size: 26rpx;
					 color:#999;
				 }
			 }
			 .three{
				 display: flex;
				 flex-direction: column;
				 align-items: center;
				line-height: 40rpx;
				 .imgThree{
					 width: 34rpx;
					 height: 34rpx;
					 image{
						 width: 100%;
						 height: 100%;
					 }
				 }
				 .num_three{
					 font-size: 24rpx;
					 color:#666;
				 }
			 }
			 .four{
				 display: flex;
				 flex-direction: column;
				 align-items: center;
				 line-height: 70rpx;
				 margin-left: 15rpx;
				 .four_img{
					 width: 34rpx;
					 height: 27rpx;
					 margin-bottom: 10rpx;
					 image{
						 width: 100%;
						 height: 100%;
					 }
				 }
				 .four_num{
					 font-size: 24rpx;
					 color:#666;
				 }
			 }
		   }
		}
	}
</style>
